layui.use(['element','form','table'],function(){
    var table = layui.table;

    var form = layui.form;
    setTimeout(function (){
        form.render('select');
    }, 1000);
    form.on('select(orderStatus)', function(data){
        vm.orderStatus = data.value;
    });

    var orderId = location.hash.substring(1);
    vm.orderId = orderId;
    table.render({
        elem: '#demo'
        ,toolbar: '#toolbarDemo'
        ,url: '/copOrderDetail' //数据接口
        ,page: false //开启分页
        ,where:{
            orderId : orderId
        }
        ,cols: [[ //表头
            {field: 'orderDetailId',title: '编号',hide:true}
            ,{field: 'productName',title: '产品名', sort: true}
            ,{field: 'productSize',title: '产品规模'}
            ,{field: 'orderDetailSize',edit: 'text', title: '数量'}
            ,{field: 'productRetailPrice',title: '推荐零售价'}
            ,{field: 'orderDetailPrice',edit: 'text',title: '订单价格'}
        ]]
        ,done: function(res, curr, count){
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res.data[0].orderStatus);
            vm.orderStatus = res.data[0].orderStatus;
            vm.orderRemark = res.data[0].orderRemark;

            if(vm.orderStatus === 0 || vm.orderStatus === 5){
                vm.isAble = true;
            }

            var count = 0;
            for(i=0;i<res.data.length;i++){
                count += res.data[i].orderDetailPrice;
            }
            vm.orderPrice = count;
        }
    });

    //头部工具栏监听事件--增加
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                window.location.href="OrderDetailAdd.html?#"+vm.orderId;
                break;
            case 'remark':
                var display = document.getElementById('remark').getAttribute('display')
                if(display === '0'){
                    $('#remark').show();
                    $('#remark').attr('display','1');
                }else{
                    $('#remark').hide();
                    $('#remark').attr('display','0');
                }
                break;
        };
    });

    //监听单元格编辑--编辑
    table.on('edit(test)', function (obj) {
        console.log(obj.value); //得到修改后的值
        console.log(obj.field); //当前编辑的字段名
        console.log(obj.data); //所在行的所有相关数据

        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        if(obj.field === 'orderDetailSize'){
            var a = {
                'orderId' : vm.orderId,
                'orderDetailId': data.orderDetailId,
                'productSize': data.orderDetailSize,
                'orderDetailPrice': data.orderDetailSize * data.productRetailPrice,
            };
        }else{
            var a = {
                'orderId' : vm.orderId,
                'orderDetailId': data.orderDetailId,
                'productSize': data.orderDetailSize,
                'orderDetailPrice': data.orderDetailPrice,
            };
        }

        var data = JSON.stringify(a)
        $.ajax({
            url: '/copOrderDetail',
            type: 'PUT',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            dataType: 'json',
            data: data,
        })
            .done(function (result) {
                if (result.code === 500) {
                    alert("修改失败")
                    location.reload([true])
                }else{
                    alert("修改成功")
                    location.reload([true])
                }
            });
    });

});

var vm = new Vue({
    el: '#app',
    data: {
        statusList:[{"id" : '0', "status" : '订单失败'},
                    {"id" : '1', "status" : '洽谈中'},
                    {"id" : '2', "status" : '基本谈妥'},
                    {"id" : '3', "status" : '拟定合同'},
                    {"id" : '4', "status" : '付款中'},
                    {"id" : '5', "status" : '订单完成'}],
       finishList:[{"id" : '0', "status" : '订单失败'},
            {"id" : '5', "status" : '订单完成'}],
        orderStatus: "",
        orderId: "",
        orderPrice: 0,
        isAble:false,
        orderRemark:"",
    },
    created() {

    },
    methods: {
        update(){
            var tmp = {
                'orderId' : vm.orderId,
                'orderStatus': vm.orderStatus,
                'orderRemark' : vm.orderRemark
            };
            var data = JSON.stringify(tmp);
            $.ajax({
                type: "put",
                url: "/copOrder",
                headers: { 'Content-Type': 'application/json;charset=utf-8' },
                dataType: 'json',
                async: true,
                data: data,
                success: function (result) {
                    if (result.code === 500) {
                        alert("修改失败")
                        location.reload([true])
                    }else{
                        alert("修改成功")
                        location.reload([true])
                    }
                }
            });
        },
        back(){
            window.location.href="orderList.html"
        }
    }
})